<template>
  <div id="app" :key="key">
    <keep-alive>
      <router-view v-if="($route.meta.keepAlive)"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>
import { GetChainLevelList } from '@/api/api'
import cityAll from "@/utils/cityList.json";
import Vue from 'vue'

export default {
  data(){
    return{
      key:1
    }
  }, 
  components: {
  },
  methods: {
    
  },
  created() {
    sessionStorage.city_id = 2380
    Vue.prototype.$back = () => {
      if (window.history.length>1) {
        // 这里可以执行你想要的操作，比如弹窗提示用户
        this.$router.back()
      } else {
        this.$router.push('index')
      }
    }
    const myMixin = {
      data() {
        return {
          scroll:0
        }
      },
      beforeRouteLeave(to, from, next) {
        this.scroll = this.$refs.gun? this.$refs.gun.scrollTop:0  //查找自己页面的滚动条
        next() //一定不可漏写
      },
      activated() {
        if (this.$refs.gun) {
          this.$refs.gun.scrollTop = this.scroll
        }
      },
    }
    // 全局混入
    Vue.mixin(myMixin)
    
    let city = JSON.parse(JSON.stringify(cityAll))
    city.forEach(i => {
      i.children.unshift({ city_name: '不限',city_name1:i.city_name,city_id: i.city_id, children: [] })
      i.children.forEach(i1 => {
        if (i1.children) {
          i1.children.unshift({ city_name: '不限',city_name1:i1.city_name,city_id: i1.city_id })
        } else {
          i1.children = [{ city_name: '不限',city_name1:i1.city_name,city_id: i1.city_id }]
        }
      })
    })

    city.unshift({
      city_name: '不限', city_id: '', children: [{
        city_name: '不限', city_id: '', children: [{
          city_name: '不限', city_id: ''
        }]
      }]
    })
    sessionStorage.cityList = JSON.stringify(city) 
  },
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // color: #fff;
}
html,body,#app{
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.flex{
  display: flex;
}
.flex_sb{
  display: flex;
  justify-content: space-between;
}
.flex_center{
  display: flex;
  justify-content: center;
}
.flex_ac{
  display: flex;
  align-items: center;
}
.flex_w{
  display: flex;
  flex-wrap: wrap;
}
.flex_sa{
  display: flex;
  justify-content: space-around;
}

.btn{
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  position: relative;
  cursor: pointer;
  &:active{
    &::before{
      position: absolute;
      z-index: 1;
      content: ' ';
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.015);
    }
  }
}

.line_text,.text_line{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@for $i from -100 through 200 {
  .line_text#{$i},.text_line#{$i}{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $i; 
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .h#{$i} {
    height: 1px * $i;
  }
  .w#{$i} {
    width: 1% * $i;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .w-#{$i} {
    width: calc(100% - (1px * $i));
  }
  .mt#{$i} {
    margin-top: 1px * $i !important;
  }
  .mb#{$i} {
    margin-bottom: 1px * $i !important;
  }
  .ml#{$i} {
    margin-left: 1px * $i !important;
  }
  .mr#{$i} {
    margin-right: 1px * $i !important;
  }
  .pt#{$i} {
    padding-top: 1px * $i !important;
  }
  .pb#{$i} {
    padding-bottom: 1px * $i !important;
  }
  .pl#{$i} {
    padding-left: 1px * $i !important;
  }
  .pr#{$i} {
    padding-right: 1px * $i !important;
  }
}

.mla {
  margin-left: auto;
}
.mra {
  margin-right: auto;
}

.list_div{
  overflow: auto;
  // &::-webkit-scrollbar {
  //   width: 0;
  //   width: 0px;
  //   background-color: rgba(255, 255, 255, 0.5);
  //   border-radius: 0px;
  // }
  // &::-webkit-scrollbar-thumb {
  //   width: 0;
  //   border-radius: 10px;
  //   background-color: #282932;
  //   border: 1px solid transparent;
  //   background-clip: padding-box;
  // }
}
</style>
